{extend name='iview/base'/}


{block name="style"}
<style>
    body{
        margin: 0 15px;
    }
    div .container{
        margin-top: 30px;
    }
    .ivu-col {
        color: #fff;
        padding: 10px 0;
        text-align: center;
        background: rgba(0,153,229,.9);
    }

    .ivu-col:nth-child(odd) {
        background: rgba(0, 153, 229, .5)
    }

</style>
{/block}

{block name="main"}
<div class="container">
    <h1>基础用法 #</h1>
    <Row>
        <i-col span="12">
            col-12
        </i-col>
        <i-col span="12">
            col-12
        </i-col>
    </Row>
    <br>
    <Row>
        <i-col span="8">
            col-8
        </i-col>
        <i-col span="8">
            col-8
        </i-col>
        <i-col span="8">
            col-8
        </i-col>
    </Row>
    <br>
    <Row>
        <i-col span="6">
            col-6
        </i-col>
        <i-col span="6">
            col-6
        </i-col>
        <i-col span="6">
            col-6
        </i-col>
        <i-col span="6">
            col-6
        </i-col>
    </Row>
</div>
<div class="container">
    <h1>通过 Flex 布局的order来改变栅格的顺序。</h1>
    <Row type="flex">
        <i-col span="6" order="4">1 | order-4</i-col>
        <i-col span="6" order="3">2 | order-3</i-col>
        <i-col span="6" order="2">3 | order-2</i-col>
        <i-col span="6" order="1">4 | order-1</i-col>
    </Row>
</div>
<div class="container">
    <h1>Flex布局 #通过给row设置参数justify为不同的值，来定义子元素的排布方式。在flex模式下有效。</h1>
    <Row type="flex">
        <i-col span="6" order="4">1 | order-4</i-col>
        <i-col span="6" order="3">2 | order-3</i-col>
        <i-col span="6" order="2">3 | order-2</i-col>
        <i-col span="6" order="1">4 | order-1</i-col>
    </Row>
</div>

<div class="container">
    <h1>通过给 row 添加 gutter 属性，可以给下属的 col 添加间距，推荐使用 (16+8n)px 作为栅格间隔。</h1>
    <Row :gutter="16">
        <i-col span="6">
            <div>col-6</div>
        </i-col>
        <i-col span="6">
            <div>col-6</div>
        </i-col>
        <i-col span="6">
            <div>col-6</div>
        </i-col>
        <i-col span="6">
            <div>col-6</div>
        </i-col>
    </Row>
</div>


<div class="container">
    <h1>左右偏移 #</h1>
    <Row>
        <i-col span="8">
        col-8</i-col>
        <i-col span="8" offset="8">
        col-8 | offset-8</i-col>
    </Row>
    <br>
    <Row>
        <i-col span="6" offset="8">
        col-6 | offset-8</i-col>
        <i-col span="6" offset="4">
        col-6 | offset-4</i-col>
    </Row>
    <br>
    <Row>
        <i-col span="12" offset="8">
        col-12 | offset-8</i-col>
    </Row>
</div>
<div class="container">
    <h1>通过给row设置参数align为不同的值，来定义子元素在垂直方向上的排布方式。在flex模式下有效。</h1>
    <p>顶部对齐</p>
    <Row type="flex" justify="center" align="top" class="code-row-bg">
        <i-col span="4"><p style="height: 80px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 30px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 100px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 60px">i-col-4</p></i-col>
    </Row>
    <p>底部对齐</p>
    <Row type="flex" justify="center" align="bottom" class="code-row-bg">
        <i-col span="4"><p style="height: 80px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 30px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 100px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 60px">i-col-4</p></i-col>
    </Row>
    <p>居中对齐</p>
    <Row type="flex" justify="center" align="middle" class="code-row-bg">
        <i-col span="4"><p style="height: 80px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 30px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 100px">i-col-4</p></i-col>
        <i-col span="4"><p style="height: 60px">i-col-4</p></i-col>
    </Row>
</div>
<div class="container">
    <h1>响应式布局 #
        参照 Bootstrap 的 响应式设计，预设四个响应尺寸：xs sm md lg，详见 API。
        调整浏览器尺寸来查看效果。</h1>
    <Row>
        <i-col :xs="2" :sm="4" :md="6" :lg="8">i-col</i-col>
        <i-col :xs="20" :sm="16" :md="12" :lg="8">i-col</i-col>
        <i-col :xs="2" :sm="4" :md="6" :lg="8">i-col</i-col>
    </Row>
</div>
{/block}

